<template>
  <div class="blogHelpHeader">
    <a-collapse :bordered="false" :activeKey="activePanel" @change="headerClick()">
      <a-collapse-panel :showArrow="false" :key="activePanel">
        <!--头部-->
        <template slot="header">
          <!--阻止事件默认行为-->
          <div @click.stop="" style="padding: 4px 0 4px 0">
            <a-row type="flex" justify="start" align="top">
              <a-col :span="4" :offset="3">
                <span @click="activeCollapsepanel($event,'OfficialLink')" class="head-link"><a-icon type="global"/>技术官网</span>
              </a-col>
              <a-col :span="10" :offset="6">
              <span @click="pushToPage(`/blog/architect`)" class="head-link"><a-icon
                type="snippets"/>归档</span>
                <a-divider type="vertical" class="head-link-gap"/>
                <span @click="pushToLeaveMsg(`/blog/leaveMsg`)" class="head-link"><a-icon
                  type="message"/>留言</span>
                <a-divider type="vertical" class="head-link-gap"/>
                <span @click="redirectToPage($event,`/blog/detail/About`)" class="head-link"><a-icon
                  type="bulb"/>关于</span>
                <a-divider type="vertical" class="head-link-gap"/>
                <span @click="redirectToPage($event,`/blog/detail/FriendLinks`)"><a-icon type="link"/>友链</span>
                <!-- <a-divider type="vertical" class="head-link-gap"/>
                 <span @click="activeCollapsepanel($event,'Menue')"><a-icon type="windows"/>菜单</span>-->
                <a-divider type="vertical" class="head-link-gap"/>
                <span v-if="isLogin" @click="logoutAction()" class="head-link"><UserInfoLabel :avatar="userInfo.headUrl"
                                                                                              :nickname="userInfo.nickName"></UserInfoLabel></span>
                <span v-else @click="loginAction()" class="head-link">未登录<a-icon type="login"/></span>
                <span v-if="device==='desktop'">
                  <a-divider type="vertical" class="head-link-gap"/>
                <a  href='https://gitee.com/KiWiPeach/nice-blog-sys' target="_blank"><img
                  src='https://gitee.com/KiWiPeach/nice-blog-sys/badge/star.svg?theme=dark' alt='star'></img></a>
                </span>
              </a-col>
            </a-row>
          </div>
        </template>

        <!--面板下拉内容-->
        <div v-if="collapseItem.isFriendLinkActive">
          趣味程序界面
        </div>
        <div v-else-if="collapseItem.isOfficialLinkActive"
             data-aos-anchor-placement="bottom-center">
          <BlogSitePanel class="blog-card-container" :websites="websites"></BlogSitePanel>
        </div>
        <div v-else-if="collapseItem.isMenueActive">
          <IconSelector></IconSelector>
        </div>
        <div v-else>
          隐藏功能加载中。。。
        </div>
      </a-collapse-panel>
    </a-collapse>
  </div>
</template>


<script>
  import BlogSitePanel from '@/components/Blog/BlogSitePanel'
  import IconSelector from '@/components/IconSelector'
  import UserInfoLabel from '@/components/Blog/UserInfoLabel'
  import { ACCESS_TOKEN } from '@/store/mutation-types'
  import { mapGetters,mapActions } from 'vuex'
  import _ from 'lodash/core'
  import { loadBlogById } from '../../api/blog'

  export default {
    name: 'BlogHelperHeader',
    components: { BlogSitePanel, IconSelector, UserInfoLabel },
    data: function() {
      return {
        loginVisible: false,
        activePanel: '',  //当前激活收缩面板
        collapseItem: {
          isFriendLinkActive: false,    //趣味应用收缩状态
          isOfficialLinkActive: false, //我的友链收缩状态
          isMenueActive: false  //菜单收缩状态
        }
      }
    },
    computed: {
      ...mapGetters(['userInfo', 'websiteInfo','device']),
      websites() {
        return this.websiteInfo && this.websiteInfo.length > 0 ? JSON.parse(this.websiteInfo[0].value) : []
      },
      isLogin() {
        return !_.isEmpty(this.userInfo)
      }
    },
    created() {
    },
    methods: {
      /**
       * 进入留言区
       */
      pushToLeaveMsg(path) {
        loadBlogById('leaveMsg').then(res => {
          if (res.code === '200') {
            this.$store.dispatch('setBlogDetail', { blog: res.data })
            this.$store.dispatch('setCarousel', true)
            this.activePanel = ''
            this.$store.dispatch('blogCommentReplyQuery', { blogId: 'leaveMsg', type: 'B_BLOG_COMMENT', currentPage: 1 })
            this.$router.push({ path })
          }
        }).catch(err => {
        })

      },
      /**
       * 打开登录提示框
       */
      loginAction() {
        this.$store.dispatch('setLoginVisible', true)
        this.$store.dispatch('setLoginModeType', 'blog')
      },
      /**
       * 退出按钮
       */
      logoutAction() {
      },
      /**
       * 导航栏非菜单项点击事件
       */
      headerClick(key) {
        this.collapseItem[key] = false
        this.activePanel = ''
        return
      },
      /**
       * 激活面板
       * @param e 事件
       * @param type 菜单类型
       */
      activeCollapsepanel(e, type) {
        //本身已展开，则进行收缩
        let key = `is${type}Active`
        if (this.collapseItem[key]) {
          this.collapseItem[key] = false
          this.activePanel = ''
        } else {
          //本身已收缩，则进行自身展开，非自身节点收缩
          for (let key of Reflect.ownKeys(this.collapseItem)) {
            this.collapseItem[key] = false
          }
          this.collapseItem[key] = true
          this.activePanel = key
        }
        e.stopPropagation()
      },
      /**
       * 前端客户端跳转
       * @param path 目标路径
       */
      redirectToPage(e, path) {
        //详情模块会覆盖首页模块的路由，所以无法使用路由进行跳转
        window.location.href = path
      },
      /**
       * 前端路由转发
       * @param path 目标路径
       */
      pushToPage(path) {
        this.$store.dispatch('setCarousel', true)
        this.activePanel = ''
        this.$router.push({ path })
      }

    }
  }
</script>

<style scoped>
  .head-link-gap {
    margin: 0 10px 0 10px;
  }

  .blog-card-container >>> .ant-card-body {
    padding: 8px;
  }

  .blogHelpHeader >>> .ant-collapse-content-box {
    background: whitesmoke;
  }

  .blogHelpHeader >>> .ant-collapse {
    color: white;
    font-weight: bold;
    border-radius: 0 /*去除圆角*/
  }

  .blogHelpHeader >>> .ant-collapse-header {
    color: white;
    padding: 0 0 0 0 !important;
    background: #183136;
    border-bottom: none
  }

  .blogHelpHeader >>> .ant-collapse > .ant-collapse-item > .ant-collapse-header {
    color: white;
  }


</style>

